<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>地图数据可视化</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./fonts/icomoon.css">
    <link rel="icon" type="image/png" href="/images/favicon-96x96.png" sizes="96x96" />
    <link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
    <link rel="shortcut icon" href="/images/favicon.ico" />
    <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png" />
    <link rel="manifest" href="/images/site.webmanifest" />
</head>

<body>
<div class="viewport">
    <div class="column">
        <div class="overview panel">
            <div class="inner">
                <div class="item">
                    <h4>3,299</h4>
                    <span>
                            <i class="icon-dot" style="color: #006cff"></i>
                            设备总数
                        </span>
                </div>
                <div class="item">
                    <h4>190</h4>
                    <span>
                            <i class="icon-dot" style="color: #6acca3"></i>
                            高耗设备
                        </span>
                </div>
                <div class="item">
                    <h4>3,001</h4>
                    <span>
                            <i class="icon-dot" style="color: #6acca3"></i>
                            运营设备
                        </span>
                </div>
                <div class="item">
                    <h4>108</h4>
                    <span>
                            <i class="icon-dot" style="color: #ed3f35"></i>
                            高载设备
                        </span>
                </div>
            </div>
        </div>

        <!-- 用户 -->
        <div class="users panel">
            <div class="inner">
                <h3>月份处理总量统计</h3>
                <div class="chart">
                    <div class="bar"></div>
                    <div class="data">
                        <div class="item">
                            <h4>1,208</h4>
                            <span>
                                    <i class="icon-dot" style="color: #ed3f35"></i>
                                    在运设备
                                </span>
                        </div>

                        <div class="item">
                            <h4>24</h4>
                            <span>
                                    <i class="icon-dot" style="color: #eacf19"></i>
                                    本月新投运
                                </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--点位-->
        <div class="point panel">
            <div class="inner">
                <h3>污染元素统计</h3>
                <div class="chart">
                    <div class="pie"></div>
                    <div class="data">
                        <div class="item">
                            <h4>320,11</h4>
                            <span>
                                    <i class="icon-dot" style="color: #ed3f35"></i>
                                    监测总数
                                </span>
                        </div>
                        <div class="item">
                            <h4>418</h4>
                            <span>
                                    <i class="icon-dot" style="color: #eacf19"></i>
                                    新增断面
                                </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="column">
        <!-- 地图 -->
        <div class="map">
            <h3>
                <span class="icon-cube"/>
                设备数据统计
            </h3>
            <div style="display: flex; justify-content: space-between;">

<!--                <div onclick="window.location.href='http://1.94.32.221:7122'" style="cursor: pointer;">-->
<!--                    <img src="/images/factoty2.png" alt="设备1" style="width: 250px; height: 250px">-->
<!--                    <h3 style="color: white; text-align: center;">奇精机械有限公司</h3>-->
<!--                </div>-->
<!--                <div onclick="window.location.href='http://1.94.32.221:7121'" style="cursor: pointer;">-->
<!--                    <img src="/images/factoty1.png" alt="设备1" style="width: 250px; height: 250px">-->
<!--                    <h3 style="color: white; text-align: center;">徐工集团</h3>-->
<!--                </div>-->
<!--                <div onclick="window.location.href='/router/third.html'" style="cursor: pointer;">-->
<!--                    <img src="/images/factoty3.png" alt="设备1" style="width: 250px; height: 250px">-->
<!--                    <h3 style="color: white; text-align: center;">上实环境水务</h3>-->
<!--                </div>-->
                <div onclick="window.location.href='http://1.94.32.221:7122'">
                    <img src="/images/factoty2.png" alt="设备1" style="width: 550px; height: 250px; transform: translateX(8%);">
                    <h3 style="color: white; text-align: center ; transform: translateX(10%);">诺海环保科技有限公司</h3>
                </div>

            </div>
        </div>

        <!--监控-->
        <div class="monitor panel">
            <div class="inner">
                <div class="tabs">
                    <a href="javascript:;" data-index="0" class="active">故障设备监控</a>
                    <a href="javascript:;" data-index="1">异常设备监控</a>
                </div>
                <div class="content" style="display: block; ">
                    <div class="head">
                        <span class="col">决策节点</span>
                        <span class="col">决策时间/触发条件</span>
                        <span class="col">决策内容</span>
                        <span class="col">决策依据</span>
                    </div>
                    <div class="marquee-view">
                        <div class="marquee">
                            <div class="row">
                                <span class="col"><span class="badge">1</span> 原水进水格栅后</span>
                                <span class="col">SS>200mg/L持续30min</span>
                                <span class="col">启动预沉池或投加PAC/PAM强化混凝</span>
                                <span class="col">进水悬浮物超标历史数据≥15%</span>
                            </div>
                            <div class="row">
                                <span class="col"><span class="badge">2</span> 调节池液位</span>
                                <span class="col">液位达到高限(80%)</span>
                                <span class="col">切换至备用池或加速提升泵流量</span>
                                <span class="col">液位传感器+暴雨预警系统联动</span>
                            </div>
                            <div class="row">
                                <span class="col"><span class="badge">3</span> 厌氧池末端</span>
                                <span class="col">VFA/碱度比>0.35</span>
                                <span class="col">增加碳源投加(乙酸钠)或减少排泥量</span>
                                <span class="col">VFA检测仪数据 + pH实时曲线</span>
                            </div>
                            <div class="row">
                                <span class="col"><span class="badge">4</span> 好氧池DO探头</span>
                                <span class="col">DO<1.2mg/L且持续下降</span>
                                <span class="col">提升曝气量10%或启动备用风机</span>
                                <span class="col">DO值趋势 + 风机电流对比 + 污泥浓度(MLSS)</span>
                            </div>
                            <div class="row">
                                <span class="col"><span class="badge">5</span> 膜池MLSS检测点</span>
                                <span class="col">MLSS>12g/L</span>
                                <span class="col">开启污泥外排阀至目标浓度8-10g/L</span>
                                <span class="col">MLSS在线仪 + 粘度计数据(>8mPa·s需干预)</span>
                            </div>
                            <div class="row">
                                <span class="col"><span class="badge">6</span> 跨膜压差(TMP)点</span>
                                <span class="col">TMP>0.35bar或1h上升0.05bar</span>
                                <span class="col">启动在线反冲洗(频率提升至2次/h)</span>
                                <span class="col">膜污染速率模型(α>0.15) + 历史清洗记录</span>
                            </div>
                            <div class="row">
                                <span class="col"><span class="badge">7</span> 产水浊度仪</span>
                                <span class="col">浊度突增至0.8NTU</span>
                                <span class="col">立即停运该膜组并启动完整性检测</span>
                                <span class="col">浊度突变阈值设定 + 相邻膜组对比分析</span>
                            </div>
                            <div class="row">
                                <span class="col"><span class="badge">8</span> 化学清洗系统</span>
                                <span class="col">累计产水量达设计值90%</span>
                                <span class="col">执行维护性清洗(0.5%NaClO+0.3%柠檬酸)</span>
                                <span class="col">膜通量衰减曲线拐点预判模型</span>
                            </div>
                            <div class="row">
                                <span class="col"><span class="badge">9</span> 曝气支管压降点</span>
                                <span class="col">压差>初始值20%</span>
                                <span class="col">切换曝气模式(变强度曝气)或实施管道清洗</span>
                                <span class="col">气量分配均衡度监测(各支管偏差>15%)</span>
                            </div>
                            <div class="row">
                                <span class="col"><span class="badge">10</span> 污泥回流泵前</span>
                                <span class="col">SVI>180mL/g</span>
                                <span class="col">投加絮凝剂(PAM)或增加剩余污泥排放</span>
                                <span class="col">污泥沉降比(SV30) + 镜检丝状菌指数</span>
                            </div>
                            <div class="row">
                                <span class="col"><span class="badge">11</span> 热交换器出口</span>
                                <span class="col">混合液温度>35℃</span>
                                <span class="col">启动冷却塔或降低处理负荷</span>
                                <span class="col">温度-膜通量修正曲线(>35℃通量衰减率+30%)</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="content">
                    <div class="head">
                        <span class="col">异常时间</span>
                        <span class="col">设备地址</span>
                        <span class="col">异常代码</span>
                    </div>
                    <div class="marquee-view">
                        <div class="marquee">
                            <div class="row">
                                <span class="col">20240501</span>
                                <span class="col">北京北清河再生水厂</span>
                                <span class="col">1000001</span>
                                <span class="icon-dot"></span>
                            </div>
                            <div class="row">
                                <span class="col">20240601</span>
                                <span class="col">北京槐房再生水处理中心</span>
                                <span class="col">1000002</span>
                                <span class="icon-dot"></span>
                            </div>
                            <div class="row">
                                <span class="col">20240704</span>
                                <span class="col">昌平未来科学城污水处理站</span>
                                <span class="col">1000003</span>
                                <span class="icon-dot"></span>
                            </div>
                            <div class="row">
                                <span class="col">20240815</span>
                                <span class="col">北京清河第二净水厂</span>
                                <span class="col">1000004</span>
                                <span class="icon-dot"></span>
                            </div>
                            <div class="row">
                                <span class="col">20240910</span>
                                <span class="col">通州碧水污水处理有限公司</span>
                                <span class="col">1000006</span>
                                <span class="icon-dot"></span>
                            </div>
                            <div class="row">
                                <span class="col">20241005</span>
                                <span class="col">北京亦庄经济开发区污水处理厂</span>
                                <span class="col">1000007</span>
                                <span class="icon-dot"></span>
                            </div>
                            <div class="row">
                                <span class="col">20241120</span>
                                <span class="col">丰台区卢沟桥再生水厂</span>
                                <span class="col">1000008</span>
                                <span class="icon-dot"></span>
                            </div>
                            <div class="row">
                                <span class="col">20241225</span>
                                <span class="col">顺义区污水处理应急处理中心</span>
                                <span class="col">1000009</span>
                                <span class="icon-dot"></span>
                            </div>
                            <div class="row">
                                <span class="col">20250115</span>
                                <span class="col">北京排水集团第九水厂</span>
                                <span class="col">1000010</span>
                                <span class="icon-dot"></span>
                            </div>
                            <div class="row">
                                <span class="col">20250210</span>
                                <span class="col">朝阳区来广营污水处理站</span>
                                <span class="col">1000006</span>
                                <span class="icon-dot"></span>
                            </div>
                            <div class="row">
                                <span class="col">20250305</span>
                                <span class="col">海淀稻香湖生态污水处理厂</span>
                                <span class="col">1000006</span>
                                <span class="icon-dot"></span>
                            </div>
                            <div class="row">
                                <span class="col">20250401</span>
                                <span class="col">门头沟区龙泉镇污水处理站</span>
                                <span class="col">1000006</span>
                                <span class="icon-dot"></span>
                            </div>
                            <div class="row">
                                <span class="col">20250501</span>
                                <span class="col">北京首都机场污水处理有限公司</span>
                                <span class="col">1000006</span>
                                <span class="icon-dot"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="column">
        <div class="order panel">
            <div class="inner">
                <!-- 筛选 -->
                <div class="filter">
                    <a href="javascript:;" data-key="day365" class="active">365天</a>
                    <a href="javascript:;" data-key="day90">90天</a>
                    <a href="javascript:;" data-key="day30">30天</a>
                    <a href="javascript:;" data-key="day1">24小时</a>
                </div>
                <!-- 数据 -->
                <div class="data">
                    <div class="item">
                        <h4>20,301,987</h4>
                        <span>
                                <i class="icon-dot" style="color: #ed3f35;"></i>
                                污水处理总量
                            </span>
                    </div>

                    <div class="item">
                        <h4>99834000</h4>
                        <span>
                            <i class="icon-dot" style="color: #eacf19;"></i>
                            运维成本(元)
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 销售额 -->
        <div class="sales panel">
            <div class="inner">
                <div class="caption">
                    <h3>污水处理总量</h3>
                    <a href="javascript:;" class="active" data-type="year">年</a>
                    <a href="javascript:;" data-type="quarter">季</a>
                    <a href="javascript:;" data-type="month">月</a>
                    <a href="javascript:;" data-type="week">周</a>
                </div>
                <div class="chart">
                    <div class="label"></div>
                    <div class="line"></div>
                </div>
            </div>
        </div>
        <!-- 渠道 季度 -->
        <div class="wrap">
            <div class="channel panel">
                <div class="inner">
                    <h3>渠道分布</h3>
                    <div class="data">
                        <div class="item">
                            <h4>11 <small>%</small></h4>
                            <span>
                                    <i class="icon-plane"></i>
                                    市政
                                </span>
                        </div>
                        <div class="item">
                            <h4>66 <small>%</small></h4>
                            <span>
                                    <i class="icon-bag"></i>
                                    工业
                                </span>
                        </div>
                    </div>
                    <div class="data">
                        <div class="item">
                            <h4>13 <small>%</small></h4>
                            <span>
                                    <i class="icon-train"></i>
                                    农村
                                </span>
                        </div>
                        <div class="item">
                            <h4>10 <small>%</small></h4>
                            <span>
                                    <i class="icon-bus"></i>
                                    生态
                                </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="quarter panel">
                <div class="inner">
                    <h3>节能预计</h3>
                    <div class="chart">
                        <div class="box">
                            <div class="gauge"></div>
                            <div class="label">75<small> %</small></div>
                        </div>
                        <div class="data">
                            <div class="item">
                                <h4>1,321</h4>
                                <span>
                                        <i class="icon-dot" style="color: #6acca3"></i>
                                        实时处理(吨)
                                    </span>
                            </div>
                            <div class="item">
                                <h4>150%</h4>
                                <span>
                                        <i class="icon-dot" style="color: #ed3f35"></i>
                                        同比增长
                                    </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 排行榜 -->
        <div class="top panel">
            <div class="inner">
                <div class="all">
                    <h3>污水处理系统设备</h3>
                    <ul>
                        <li>
                            <i class="icon-cup1" style="color: #d93f36;"></i>
                            MBR膜组件
                        </li>
                        <li>
                            <i class="icon-cup2" style="color: #68d8fe;"></i>
                            AAO工艺段
                        </li>
                        <li>
                            <i class="icon-cup3" style="color: #4c9bfd;"></i>
                            智能格栅机
                        </li>
                    </ul>
                </div>

                <div class="province">
                    <h3>核心组件</h3>
                    <div class="data">
                        <ul class="sup">
                            <li>
                                <span>4</span>
                                <span>曝气器</span>
                            </li>
                            <li>
                                <span>5</span>
                                <span>刮泥机</span>
                            </li>
                            <li>
                                <span>6</span>
                                <span>滗水器 </span>
                            </li>
                            <li>
                                <span>7</span>
                                <span>污泥泵</span>
                            </li>
                            <li>
                                <span>8</span>
                                <span>加药装置</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<script src="./js/jquery.min.js"></script>
<script src="./js/echarts.min.js"></script>
<script src="./js/index.js"></script>

<script src="./js/china.js"></script>
<script src="./js/mymap.js"></script>

</html>